<template>
  <div>
    <div class="header">
      <div class="title"><text>校区管理</text></div>
      <el-button type="primary" style="margin-left:20px;" 
      size="mini" class="icon el-icon-circle-plus-outline"
       @click="dialogFormVisible=true">添加校区
      </el-button>
    </div>
    <!-- 内容区域-列表 -->
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="校区" width="180">
        </el-table-column>
        <el-table-column prop="address" label="所有人" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="校区电话" width="180">
        </el-table-column>
        <el-table-column prop="tel" label="校区座机" width="180">
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
              <el-button
                size="mini"
                type="danger"
                style="background-color:rgb(97, 44, 196);"
                @click="updates(scope.row)"
               >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="deletes(scope.row)"
               >删除</el-button>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.page"
      :page-sizes="[1, 2, 5, 4]"
      :page-size="queryinfo.psize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <!-- 添加 -->
    <el-dialog title="添加校区" v-model="dialogFormVisible">
      <el-form  :model="form" :label-position="labelPosition">
        <el-form-item label="联系人名称">
          <el-input v-model="form.name" style="width: 600px;" ></el-input>
        </el-form-item>
        <el-form-item label="校区名称">
          <el-input v-model="form.title" style="width: 600px;"></el-input>
        </el-form-item>
        <el-form-item label="校区电话">
          <el-input v-model="form.tel" style="width: 600px;"></el-input>
        </el-form-item>
        <el-form-item label="校区手机号">
          <el-input v-model="form.mobile" style="width: 600px;"></el-input>
        </el-form-item>
        <el-form-item label="校区地址">
          <el-cascader
          style=" margin-right: 380px; "
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
           >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.address" style="width: 600px;"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="insertadd">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 更新 -->
    <el-dialog title="更新校区" v-model="dialogFormVisibleupdate">
      <el-form  :model="update" :label-position="labelPosition">
        <el-form-item label="联系人名称">
          <el-input v-model="update.name" style="width: 600px;" ></el-input>
        </el-form-item>
        <el-form-item label="校区名称">
          <el-input v-model="update.title" style="width: 600px;"></el-input>
        </el-form-item>
        <el-form-item label="校区电话">
          <el-input v-model="update.tel" style="width: 600px;"></el-input>
        </el-form-item>
        <el-form-item label="校区手机号">
          <el-input v-model="update.mobile" style="width: 600px;"></el-input>
        </el-form-item>
        <el-form-item label="校区地址">
          <el-cascader
          style=" margin-right: 380px; "
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
           >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="update.address" style="width: 600px;"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
          <el-button type="primary" @click="updatex">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import { regionData, CodeToText } from "element-china-area-data";
  export default {
    data() {
      return {
        tableData:[],
        options: regionData,
        selectedOptions:[],
        labelPosition:'rigth',
        dialogFormVisibleupdate:false,
        dialogFormVisible:false,
        queryinfo:{
          page:1,
          psize:3
        },
        form:{
          province:'',//省级
          city:'',//市级
          area:''//县级
        },
        update:{
          address:'',
          tel:'',
          mobile:'',
          name:'',
          title:'',
          province:'',//省级
          city:'',//市级
          area:''//县级
        },
        total:0
      }
    },
    created() {
      this.getcampuslist()
    },
    methods:{
      // 三级联动
      handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      alert(loc);
    },
    updates(row){
      console.log(row)
      this.dialogFormVisibleupdate=true
      this.update.id=row.id
      this.tableData.forEach(item=>{
        if(row.id==item.id){
          this.update.name=item.name
          this.update.title=item.title
          this.update.mobile=item.mobile
          this.update.address=item.address
          this.update.tel=item.tel
          this.update.province=item.province
          this.update.city=item.city
           this.update.area=item.area
        }
      })
    },
    async updatex(){
      const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/campus/add',this.update)
      console.log(res)
      if(res.errCode==10000){
          this.$message.success('修改成功')
          this.dialogFormVisibleupdate=false
          this.getcampuslist()
        }else{
          this.$message,error('修改失败')
        }
    },
    //  分页
    handleSizeChange(val) {
      this.queryinfo.psize=val
      this.getcampuslist()
      console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.queryinfo.page=val
        this.getcampuslist()
        console.log(`当前页: ${val}`);
      },
    // 列表
    async getcampuslist(){
        const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/campus/list',{params:this.queryinfo})
        // console.log(res)
        this.tableData=res.data.list
        this.total=res.data.counts
      },
      // 添加
     async insertadd(){
        this.form.province=this.selectedOptions[0]
        this.form.city=this.selectedOptions[1]
        this.form.area=this.selectedOptions[2]
        const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/campus/add',this.form)
        console.log(res) 
        if(res.errCode==10000){
          this.$message.success('添加成功')
          this.dialogFormVisible=false
          this.getcampuslist()
        }else{
          this.$message.error('添加失败')
        }
      },
      // 删除
     async deletes(row){
        // console.log(row)
        const cate = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => {
          return error;
        });
        if (cate == 'confirm') {
          const {
            data: res
          } = await this.$http.get('http://www.eshareedu.cn/edusystems/api/campus/delete',{params:{id:row.id}})
          if (res.errCode == 10000) {
            this.$message.success('删除成功')
            this.getcampuslist()
          }
        }
        if (cate != 'confirm') {
          this.$message.info('已取消删除')
        }
      }
    }
  }

</script>
<style scoped>
  .header {
    width: 100%;
    display: flex;
    height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 1px 1px 3px 1px rgb(200, 226, 241);
    background-color: rgb(233, 237, 240);
    align-items: center;
  }

  .title {
    width: 100px;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /* background-color: rgb(160, 197, 240); */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    /* font-weight: bold; */
  }

</style>
